<template>
    <div><a-carousel arrows>
        <div
                slot="prevArrow"

                class="custom-slick-arrow"
                style="left: 10px;zIndex: 1"
        >
            <a-icon type="left-circle" />
        </div>
        <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
            <a-icon type="right-circle" />
        </div>
        <div class="imgSwiper" v-for="(item,index) in imgList" :key="index" :style="{backgroundImage:`url(${item.imgUrlPc})`}"><h3></h3> </div>
<!--        <div><h3>2</h3></div>-->
<!--        <div><h3>3</h3></div>-->
<!--        <div><h3>4</h3></div>-->
    </a-carousel></div>
</template>

<script>
    export default {
        name: "carousel",
        data(){
            return{
                imgList:[]
            }
        },
        created() {
            this.$axios.get('http://wkt.myhope365.com/weChat/applet/course/banner/list?number=4').then(res=>{
                // console.log(res)
                this.imgList = res.data.data
                console.log(this.imgList)
            })
        }
    }
</script>

<style scoped>
    .ant-carousel >>> .slick-slide {
        text-align: center;
        height: 400px;
        line-height: 160px;
        overflow: hidden;
    }

    .ant-carousel >>> .custom-slick-arrow {
        width: 25px;
        height: 25px;
        font-size: 25px;
        color: #fff;
        background-color: rgba(31, 45, 61, 0.11);
        opacity: 0.3;
    }
    .ant-carousel >>> .custom-slick-arrow:before {
        display: none;
    }
    .ant-carousel >>> .custom-slick-arrow:hover {
        opacity: 0.5;
    }
    .imgSwiper{
        height: 400px;
        width: 100%;
        background-size: cover;
        background-position: 50%;
        background-repeat: no-repeat;
    }
    /*.ant-carousel >>> .slick-slide h3 {*/
    /*    color: #fff;*/
    /*}*/

</style>